<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="box"></ul>
    <!-- <script>
    // let box = document.querySelector('.box')
    // box.style.width = '100px'
    // box.style.width = '101px'
    // box.style.width = '102px'
    // box.style.width = '103px'
    // box.style.width = '104px'
    
    let el = document.getElementById('app');
    el.style.width = (el.offsetWidth+1) + 'px';
    el.style.width = 1 + 'px'
  </script> -->

    <script>
        let ul = document.querySelector('.box')
        // ul.style.display = 'none'
        // let frag = document.createDocumentFragment()  // 文档碎片
        let newUl = ul.cloneNode(true)


        for (let i = 0; i < 200; i++) {
            let li = document.createElement('li')
            li.innerHTML = i
            newUl.appendChild(li)
        }
        // ul.style.display = 'block'
        // ul.appendChild(frag)
        ul.parentNode.replaceChild(newUl, ul)
    </script>
</body>

</html>